<!--
  ~ This program is part of the OpenLMIS logistics management information system platform software.
  ~ Copyright © 2013 VillageReach
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~  
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org. 
  -->

<div xmlns="http://www.w3.org/1999/html">
  <h2>
    <span id="searchUserLabel" openlmis-message="label.search.user"></span>
    <a href="#/create-user" id="userAddNew" class="pull-right btn btn-primary" openlmis-message="button.add.new"></a>
  </h2>

  <div class="alert alert-success" id="saveSuccessMsgDiv" ng-show="userId">
    <span ng-bind="message"></span>&nbsp;
    <a id="viewHereLink" href="" ng-click="edit(userId)" openlmis-message="search.viewHere"></a>
  </div>

  <div id="searchControl" class="row-fluid">
    <div class="span5 search-in-category">
      <div class="input-append input-prepend">
        <input id='searchUser' type="text" class="span7" ng-model="query" maxlength="50" autocomplete="off"
               ng-keydown="triggerSearch($event)" openlmis-message="placeholder.user.search"/>
        <button class="btn" ng-click="loadUsers(1)">
          <i id='searchIcon' class="icon-search"></i>
        </button>
      </div>
    </div>
  </div>

  <div class="table-container">
    <table id="userSearchResultTable" class="table table-striped table-bordered search-list" ng-show="showResults">
      <thead>
        <tr class="gradient-header resultCountHeader">
          <th colspan="5">
            <span ng-switch on="totalItems">
              <h3 id="noResultMessage" ng-switch-when="0" openlmis-message="msg.no.matches|searchedQuery"></h3>
              <h3 id="oneResultMessage" ng-switch-when="1" openlmis-message="msg.one.match|searchedQuery"></h3>
              <h3 id="nResultsMessage" ng-switch-default openlmis-message="msg.many.matches|totalItems|searchedQuery"></h3>
            </span>
            <a id="closeButton" class="close-btn" href="" ng-click="clearSearch()" tabindex="-1"></a>
          </th>
        </tr>
        <tr class="gradient-header" ng-show="userList.length">
          <th id="nameHeader" class="col-name" openlmis-message="header.user.name"></th>
          <th id="userNameHeader" class="col-name" openlmis-message="header.user.userName"></th>
          <th id="emailHeader" openlmis-message="header.user.email"></th>
          <th id="verifiedHeader" class="col-icon-ok" openlmis-message="header.user.verified"></th>
          <th id="activeHeader" class="col-icon-ok" openlmis-message="header.user.active"></th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="user in userList">
          <td>
            <a id="name{{$index}}" href="" ng-click="edit(user.id)">{{user.firstName}} {{user.lastName}}</a>
          </td>
          <td id="userName{{$index}}" ng-bind="user.userName"></td>
          <td id="email{{$index}}" ng-bind="user.email"></td>
          <td id="verified{{$index}}" class="center-justified">
            <i id="verifiedIconOk{{$index}}" ng-class="{'icon icon-ok': user.verified}"></i>
          </td>
          <td id="active{{$index}}" class="center-justified">
            <i id="activeIconOk{{$index}}" ng-class="{'icon-ok': user.active}"></i>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <pagination total-items="totalItems" page="currentPage" max-size="5" items-per-page="pagination.limit"
              direction-links="false" ng-show="userList.length" class="pagination-sm"></pagination>
</div>